<template>
	<view>
		<view>
			<u-swiper :list="list1" height="260" :indicator="true" indicatorMode="dot"></u-swiper>
		</view>
		<view class="content">
			<view class="content_one">
				<view class="one_title">
					<text>肉类多样,健康时尚</text>
					<view class="btn">
						<text>立即抢购</text>
					</view>
				</view>
				<image src="../../static/goods/image2.png" mode="widthFix"></image>
			</view>
			<view class="content_two">
				<view class="two_content">
					<view style="flex: 1;text-align: center;">
						<text>好牛好生活</text>
						<view class="btn">
							<text>立即抢购</text>
						</view>
					</view>
					<image src="../../static/goods/image2.png"></image>
				</view>
				<view class="three_content">
					<view style="flex: 1;text-align: center;">
						<text>品质牛 牛品质</text>
						<view class="btn">
							<text>立即抢购</text>
						</view>
					</view>
					<image src="../../static/goods/image2.png"></image>
				</view>
			</view>
			
		</view>
	
		<view class="search_type">
			<view v-for="(item,index) in searchData" @click="checkType(item)" :key="index" :class="['type_list',item.id === active_type?'active_type':'']">
				{{item.title}}
			</view>	
		</view>
		
		<view>
			<goodsCard v-for="item in goodsData" :key="item.id" :goods="item"></goodsCard>
		</view>
	
		<nav-bar></nav-bar>
	</view>
</template>

<script>
	import GoodsCard from '@/components/goodsCard/index.vue'
	export default {
		components:{GoodsCard},
		data() {
			return {
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				active_type:1,
				searchData:[
					{
						id:1,
						title:'全部',
						value:1
					},
					{
						id:2,
						title:'店长推荐',
						value:2
					},
					{
						id:3,
						title:'热销专区',
						value:3
					},
					{
						id:4,
						title:'礼盒定制',
						value:4
					}
				],
				goodsData:[
					{
						id:1,
						title:'散装牛干巴晾晒6个，散装牛干巴晾晒6个，散装牛干巴晾晒6个',
						desc:'新品上市|限购1件',
						price:'68.8',
						oldPrice:'123.3',
						img:''
					},
					{
						id:2,
						title:'散装牛干巴晾晒6个，散装牛干巴晾晒6个，散装牛干巴晾晒6个',
						desc:'新品上市|限购1件',
						price:'68.8',
						oldPrice:'123.3',
						img:''
					},
					{
						id:3,
						title:'散装牛干巴晾晒6个，散装牛干巴晾晒6个，散装牛干巴晾晒6个',
						desc:'新品上市|限购1件',
						price:'68.8',
						oldPrice:'123.3',
						img:''
					},
					{
						id:4,
						title:'散装牛干巴晾晒6个，散装牛干巴晾晒6个，散装牛干巴晾晒6个',
						desc:'新品上市|限购1件',
						price:'68.8',
						oldPrice:'123.3',
						img:''
					}
				]
			}
		},
		methods: {
			checkType(item){
				this.active_type = item.id
			}
		}
	}
</script>

<style scoped lang="scss">
	
	
	.content {
		padding: 40rpx 24rpx;
		display: flex;
		.content_two{
			flex: 1;
			margin-left: 8rpx;
			.two_content{
				border-radius: 6rpx;
				background: rgba(255, 250, 241, 1);
				height: 174rpx;
				margin-bottom: 8rpx;
				    display: flex;
				    justify-content: center;
				    align-items: center;
			}
			.three_content{
				height: 174rpx;
				border-radius: 6rpx;
				background: rgba(246, 251, 255, 1);
				display: flex;
				justify-content: center;
				align-items: center;
			}
			image{
				width: 180rpx;
				height: 144rpx;
			}
			text{
				height: 28rpx;
				opacity: 1;
				/** 文本1 */
				font-size: 28rpx;
				font-weight: 700;
				line-height: 28rpx;
				color: rgba(51, 51, 51, 1);
			}
			.btn{
				width: 128rpx;
				height: 47rpx;
				opacity: 1;
				border-radius: 80rpx;
				text-align: center;
				border: 1rpx solid #CCCCCC;
				margin: 20rpx;
				margin-left: 40rpx;
				text {
					height: 24rpx;
					/** 文本1 */
					font-size: 24rpx;
					font-weight: 500;
					line-height: 24rpx;
					color: rgba(102, 102, 102, 1);
				
				}
			}
			
		}
		.content_one {
			padding: 18rpx;
			width: 262rpx;
			height: 320rpx;
			opacity: 1;
			border-radius: 6rpx;
			background: #FFF4F4;
			.one_title {
				flex-flow: column;

				display: flex;
				align-items: center;
				margin-top: 25rpx;

				text {
					height: 28rpx;
					opacity: 1;
					/** 文本1 */
					font-size: 28rpx;
					font-weight: 700;
					letter-spacing: 0rpx;
					line-height: 28rpx;
					color: rgba(51, 51, 51, 1);

				}

				.btn {
					width: 128rpx;
					height: 47rpx;
					opacity: 1;
					border-radius: 80rpx;
					text-align: center;
					border: 1rpx solid #CCCCCC;
					margin: 20rpx;

					text {
						height: 24rpx;
						/** 文本1 */
						font-size: 24rpx;
						font-weight: 500;
						line-height: 24rpx;
						color: rgba(102, 102, 102, 1);

					}
				}
			}

			image {
				width: 264rpx;
			}
		}
	}


	.search_type{
		padding: 0 24rpx;
		    display: flex;
		    justify-content: space-around;
			height: 60rpx;
			.type_list{
				height: 60rpx;
				opacity: 1;
				border-radius: 80rpx;
				border: 1rpx solid rgba(221, 221, 221, 1);
				font-weight:500;
				line-height: 60rpx;
				padding: 0 20rpx;
				color: rgba(102, 102, 102, 1);			
			}
			.active_type{
				background: rgba(190, 46, 35, 0.06);
				font-weight:700;
				color: rgba(190, 46, 35, 1);
				border: 1rpx solid rgba(190, 46, 35, 1);
			}
	}
</style>